import { ref,onMounted} from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { getCategoryListApi } from "@/apis/category";
export function useCategory() {
    const categoryList = ref({});
    const route = useRoute();
    const getCategoryList = async (id = route.params.id) => {
        const res = await getCategoryListApi(id);
        categoryList.value = res.data.result;
    };
    // 初始时刻，无变化的路由参数
    onMounted(() => getCategoryList())
    // 使用beforeRouteUpdate导航钩子
     // 目标:路由参数变化的时候 可以把分类数据接口重新发送
    onBeforeRouteUpdate((to, from) => {
        // to: 即将要进入的目标 
        //from: 当前导航正要离开的路由
        // console.log('路由变化了');
        // 存在问题：使用最新的路由参数请求最新的分类数据
        getCategoryList(to.params.id);
    })

    return { categoryList }
}